<template>
  <div class="box">
    <component
      :is="showRegisterPage.comp"
      @changeShowRegisterPage="changeShowRegisterPage"
      @changeShowLogin="changeShowLogin"
    ></component>
  </div>
</template>

<script setup lang="ts">
import { reactive, shallowRef, defineEmits } from "vue";
import userRegister from "@/views/register/components/userRegister.vue";
import expertRegister from "@/views/register/components/expertRegister.vue";
import institutionRegister from "@/views/register/components/institutionRegister.vue";

const emit = defineEmits(["changeShowLogin"]);

let showRegisterPage = reactive({
  name: "user",
  comp: shallowRef(userRegister),
});

const changeShowRegisterPage = (name: string, comp: any) => {
  showRegisterPage.name = name;
  showRegisterPage.comp = comp;
};
const changeShowLogin = () => {
  emit("changeShowLogin", true);
};
</script>

<style lang="scss" scoped>
.box {
  width: 4rem;
  min-height: 70%;
  margin-top: 6%;
  margin-bottom: 6%;
  background-color: #fff;
}
</style>
